<template>
  <div class="content">
    <!-- 筛选 -->
    <el-card class="card-header" v-if="false">
      <el-select v-model="dataShip" clearable placeholder="请选择船舶">
        <el-option v-for="item in dataShipColumns" :key="item.boxId" :label="item.deptName" :value="item.boxId">
        </el-option>
      </el-select>
      <el-select clearable style="margin-left: 20px" v-model="dataType" placeholder="请选择告警类型">
        <el-option v-for="item in dataTypeColumns" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker style="margin-left: 20px" v-model="dataTime" type="datetimerange" value-format="yyyy-MM-dd"
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" @click="getChartMessage" style="margin-left: 20px">查询</el-button>
      <el-button type="info" @click="clickReset" style="margin-left: 20px">清空</el-button>
    </el-card>
    <div class="charts-content">
      <el-card class="charts-box">
        <selForm :dataShipColumns="dataShipColumns" :dataTypeColumns="dataTypeColumns" @query="handleColumnQuery" />
        <div class="title-charts">行为违规告警统计</div>
        <!-- <div :class="[{'charts-box-hide': chartsType === 'line'}]">
          <uChartsColumn ref="childChartsColumn" />
        </div>
        <div :class="[{'charts-box-hide': chartsType === 'column'}]"> -->
          <uChartsLine ref="childChartsLine" />
        <!-- </div> -->
      </el-card>
      <!-- <el-card class="charts-box">
        <selForm :dataShipColumns="dataShipColumns" :dataTypeColumns="dataTypeColumns" @query="handleColumnQuery" />
        <uchartsColumn ref="childChartsColumn" />
      </el-card>
      <el-card class="charts-box">
        <selForm :dataShipColumns="dataShipColumns" :dataTypeColumns="dataTypeColumns" @query="handleColumnLine" />
        <uchartsLine ref="childChartsLine" />
      </el-card> -->
      <el-card class="charts-box">
        <selForm :dataShipColumns="dataShipColumns" :dataTypeColumns="dataTypeColumns" @query="handleColumn1Query" />
        <div class="title-charts">告警数量统计</div>
        <uchartscolumn1 ref="childChartsColumn1" />
      </el-card>
    </div>
  </div>
</template>

<script>
  import uChartsColumn from "./statistics/column.vue";
  import uChartsLine from "./statistics/line.vue";
  import uchartscolumn1 from "./statistics/column1.vue";
  import selForm from "./statistics/selForm.vue";

  export default {
    name: "statistics",
    components: {
      uchartscolumn1,
      uChartsColumn,
      uChartsLine,
      selForm,
    },
    data() {
      return {
        chartsType: 'line',
        dataTime: [],
        dataShip: "",
        dataType: "",
        dataShipColumns: [],
        dataTypeColumns: [],
      };
    },
    mounted() {
      this.getCompanyShips();
      let params = {
        dataShip: [],
        dataTime: "",
        dataType: "",
        typeCharts: 'line',
      }
      this.getAlgorithm()
      this.getChartMessage(params, 'query');
      this.getChartMessage(params, 'line');
      this.handleColumn1Query(params);
    },
    methods: {
      handleColumnQuery(params) {
        this.chartsType = params.typeCharts;
        this.getChartMessage(params, 'query');
      },
      handleColumnLine(params) {
        this.getChartMessage(params, 'line');
      },
      handleColumn1Query(params) {
        const that = this;
        that
          .$axios({
            method: "get",
            url: `/api/message/chart/state/type`,
            params: {
              algorithmNames: params.dataType || '',
              boxIds: params.dataShip.join(',') || '',
              beginTime: params.dataTime[0] ? params.dataTime[0] : "",
              endTime: params.dataTime[1] ? params.dataTime[1] : "",
            },
          })
          .then((res) => {
            that.$refs.childChartsColumn1.typeCharts = params.typeCharts;
            that.$refs.childChartsColumn1.messageColumns = res.data.data;
            that.$refs.childChartsColumn1.getServerData();
          })
          .catch((error) => {
            console.log(error);
          });
      },
      getAlgorithm() {
        const that = this;
        that
          .$axios({
            method: "get",
            url: `/api/message/get-all-algorithm`,
            params: {},
          })
          .then((res) => {
            console.log(res);
            const data = res.data.data;
            that.dataTypeColumns.push({
              value: "",
              label: "全部",
            })
            data.forEach((item) => {
              that.dataTypeColumns.push({
                value: item,
                label: item,
              })
            })
          })
          .catch((error) => {
            console.log(error);
            that.dataTypeColumns.push({
              value: res.data.data[0].algorithmName,
              label: res.data.data[0].algorithmName,
            })
          })
          .catch((error) => {
            console.log(error);
          });
      },
      // 重置
      clickReset() {
        this.dataTime = [];
        this.dataShip = "";
        this.dataType = "";
        this.getChartMessage();
      },
      // 获取告警数据
      getChartMessage(params, type) {
        const that = this;
        const data = {
          allNum: 0,
          days: [],
          errAllNum: 0,
          errorNums: null,
          nums: null,
          types: {}
        }
        that
          .$axios({
            method: "get",
            url: `/api/message/chart/message/type`,
            params: {
              algorithmNames: params.dataType || '',
              boxIds: params.dataShip.join(',') || '',
              beginTime: params.dataTime[0] ? params.dataTime[0] : "",
              endTime: params.dataTime[1] ? params.dataTime[1] : "",
            },
          })
          .then((res) => {
            if (res.data.code == 0) {
              // if (type == 'query') {
              //   that.$refs.childChartsColumn.typeCharts = params.typeCharts;
              //   that.$refs.childChartsColumn.messageColumns = res.data.data;
              //   that.$refs.childChartsColumn.getServerData();
              // } else if (type == 'line') {
              //   that.$refs.childChartsLine.typeCharts = params.typeCharts;
              //   that.$refs.childChartsLine.messageColumns = res.data.data;
              //   that.$refs.childChartsLine.getServerData();
              // }
              that.$refs.childChartsLine.typeCharts = params.typeCharts;
              that.$refs.childChartsLine.messageColumns = res.data.data;
              that.$refs.childChartsLine.getServerData();
            }
          })
          .catch((error) => {
            console.log(error);
          });
      },
      // 获取船舶列表
      getCompanyShips() {
        const that = this;
        that
          .$axios({
            method: "get",
            url: `/api/department/dept/ships`,
            params: {
              page: 1,
              count: 9999,
              kinds: 1,
            },
          })
          .then((res) => {
            if (res.data.code == 0) {
              that.dataShipColumns = res.data.data.list;
            }
          })
          .catch((error) => {
            console.log(error);
          });
      },
    },
  };
</script>
<style scoped>
  .title-charts{
    font-size: 24px;
    margin: 14px;
    font-weight: bold;
    margin-bottom: 30px;
  }
  .charts-box-hide {
    width: 0px;
    height: 0px;
    opacity: 0;
  }

  .charts-content {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .content {
    width: 100%;
    margin-bottom: 20px;
  }

  .card-header {
    display: flex;
    margin: 20px auto;
  }

  .charts-box {
    width: 100%;
    min-height: 600px;
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
</style>
